<template>
  <div>
    <el-form
      :model="articleAdd"
      :rules="articleAddRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          placeholder="请输入文章标题"
          v-model="articleAdd.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          v-model="articleAdd.articleBody"
          ref="myQuillEditor"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
      <el-form-item label="视频地址">
        <el-input
          placeholder="请输入视频地址"
          v-model="articleAdd.videoURL"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; // 调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { add, update } from "@/api/hmmm/articles.js";
export default {
  props: {
    change: {
      type: Object,
    },
  },
  created() {
    console.log(this.change);
    this.articleAdd.title = this.change.title;
    this.articleAdd.videoURL = this.change.videoURL;
    this.articleAdd.articleBody = this.change.articleBody;
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      // 验证规则
      articleAddRules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      // 绑定的数据
      articleAdd: {
        title: "",
        videoURL: "",
        articleBody: "",
      },
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            [{ list: "ordered" }, { list: "bullet" }], // 列表
            ["blockquote", "code-block"], // 代码块
            ["image", "video"], // 上传图片、上传视频
          ],
        },
        placeholder: "",
      },
    };
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    // 确认添加
    confirm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.change.id) {
              const obj = this.articleAdd;
              obj.id = this.change.id;
              const data = await update(obj);
              this.$emit("changeClose", data);
            } else {
              const data = await add(this.articleAdd);
              this.$emit("close", data);
            }
            // 清空内容
            this.articleAdd.title = "";
            this.articleAdd.videoURL = "";
            this.articleAdd.articleBody = "";
          } catch (error) {
            this.$message("添加失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>

<style  >
</style>